<template>
  <div class="pg-alloy">
    <van-button type="primary" @click="init">click me</van-button>
    <img class="pg-alloy_preview" v-if="dataURL" :src="dataURL" alt="" />

    <div class="pg-alloy_contain" ref="contain">
      <img
        v-for="item in imgList"
        ref="el"
        :key="item.src"
        class="pg-alloy_contain_item"
        :src="item.src"
        alt="" />
    </div>
  </div>
</template>

<script>
import AlloyFinger from 'alloyfinger'
import 'alloyfinger/transformjs/transform'
import html2canvas from 'html2canvas'

import { Toast } from 'vant'
import a from '@/images/test_four.png'
import b from '@/images/test_two.png'

export default {
  name: 'Alloy',
  props: {
    aid: {
      type: String,
    },
  },
  data() {
    return {
      b,
      imgList: [
        {
          src: a,
          style: {
            scale: 1,
            transform: 'none',
            rotateZ: 0,
            scaleX: 1,
            translateX: 20,
            translateY: 0,
            scaleDisabled: false,
          },
        },
        {
          src: b,
          style: {
            scale: 1,
            transform: 'none',
            rotateZ: 0,
            scaleX: 1,
            translateX: 0,
            translateY: 0,
            scaleDisabled: true,
          },
        },
      ],
      initScale: 1,
      state: 1,
      dataURL: null,
    }
  },
  mounted() {
    this.bindEvents()
  },

  methods: {
    async init() {
      const $contain = this.$refs.contain
      const width = $contain.offsetWidth
      const height = $contain.offsetHeight

      const options = {
        width,
        height,
        logging: true, // 启用日志记录
        useCORS: true, // 允许跨域
        allowTaint: true,
      }

      const canvas = await html2canvas(this.$refs.contain, options)
      this.dataURL = canvas.toDataURL('image/png', 0.8)
    },
    bindEvents() {
      this.$refs.el.forEach((el, i) => {
        this.initAlloyFinger(el, i)
      })
    },
    initAlloyFinger(el, i) {
      return new Promise((resolve) => {
        const that = this
        window.Transform(el)
        new AlloyFinger(el, {
          multipointStart() {
            if (that.imgList[i].style.scaleDisabled) {
              Toast('不允许缩放')
              return
            }
            //一个手指以上触摸屏幕触发
            this.initScale = el.scaleX
          },
          multipointEnd() {
            //当手指离开，屏幕只剩一个手指或零个手指触发
          },
          rotate(evt) {
            //evt.angle代表两个手指旋转的角度
            el.rotateZ += evt.angle
          },
          pointStart() {
            //手指触摸屏幕触发
          },
          pinch(evt) {
            //evt.scale代表两个手指缩放的比例

            if (that.imgList[i].style.scaleDisabled) {
              Toast('不允许缩放')
              return
            }
            el.scaleX = el.scaleY = this.initScale * evt.zoom
          },

          pressMove(evt) {
            el.translateX += evt.deltaX
            el.translateY += evt.deltaY

            evt.preventDefault()
          },
          touchMove(evt) {
            console.log('evt:', evt)

            console.log(
              'touchmove: ',
              evt.changedTouches[0].pageX,
              evt.changedTouches[0].pageY,
            )
          },
          tap(evt) {
            Toast('单击触发')
            console.log('evt:', evt)
          },
          doubleTap(evt) {
            // 双击屏幕触发
            console.log('evt:', evt)

            Toast('双击屏幕触发')
          },

          longTap(evt) {
            //长按屏幕750ms触发
            Toast('长按了', evt)
          },

          swipe(evt) {
            // evt.direction代表滑动的方向;
            console.log(
              'swipe' + evt.direction,
              evt.changedTouches[0].pageX,
              evt.changedTouches[0].pageY,
            )
          },
          singleTap() {
            //单击
            Toast('单击触发')
          },
        })

        resolve()
      })
    },
  },
}
</script>

<style lang="scss">
.pg-alloy {
  &_preview {
    width: 100%;
  }
  &_contain {
    box-sizing: border-box;
    border: 1px solid blue;
    height: 500px;
    &_item {
      border: 1px solid pink;
      position: relative;
      &_pic {
        vertical-align: middle;
      }
    }
  }
}
</style>
